body
{
	width:				800px;
	height:				480px;
}
.container
{
}
.shortcut
{
	position:			absolute;
	background-image:	url(theme/no_page.png);
	background-repeat:	stretch;
	background-color:	transparent;
	text-align:			center;
	vertical-align:		middle;
	cursor:				pointer;
}
.shortcut:hover
{
	border:				solid 1px black;
}
.shortcut:active
{
	border:				solid 1px black;
}
button
{
	background-image:	url(theme/no_page.png);
	background-color:	transparent;
	cursor:				pointer;
}
.control
{
	position:			absolute;
	background-image:	url(theme/no_page.png);
	background-repeat:	stretch;
	background-color:	transparent;
	text-align:			center;
	vertical-align:		middle;
	cursor:				pointer;
}
button.ctrl
{
}
button.ctrl:hover
{
	border:				solid 1px black;
}
button.ctrl:active
{
	border:				solid 1px black;
}
popup
{
	background-color:	transparent;
	width:				60px;
	height:				150px;
	border:				none;
}
.clock 
{
	behavior:			graphin-clock;
	width:				200px;
	height:				200px;

	position:			absolute;
	top:				10px;
	left:				10px;

	background-image:	url(clock-back.png);
	background-repeat:	no-repeat;
	background-position:50% 50%; /* middle center */

	/* clock glass */	   
	foreground-image:	url(clock-fore.png);
	foreground-repeat:	no-repeat;	   
	foreground-position:50% 50%; /* middle center */

	/* our behavior will these for "hands" coloring */     
	-hand-hours: 		#000;
	-hand-minutes: 		#00a;
	-hand-seconds: 		#a00;

	-hand-hours-width: 	3pt; 
	-hand-minutes-width: 2pt; 
	-hand-seconds-width: 1pt; 
}